<template>
  <div>
    <h1>{{ msg }}</h1>
    {{ value }}
    value:
    <TestCom :value="value" @myInput="onInput"></TestCom>

    <!-- <TodoControl @onKeyUp="onKeyUp"></TodoControl> -->

    <TodoView
      :list="list"
      @onChange="onChange"
      @removeClick="removeClick"
    ></TodoView>

    <TodoView
      title="已完成"
      :list="list.filter((v) => v.check)"
      @removeClick="removeClick"
    ></TodoView>
  </div>
</template>

<script>
// 什么是组件？组件可以干什么？
/**
 * 组件封装原则：（数据往下流，逻辑往上走）
 * 1. 子组件尽可能的只负责渲染
 * 2. 父组件存储数据和逻辑
 *
 * 组件使用原则：（局部使用）
 * 1. 引入
 * 2. 注册 components: {}
 * 3. 当成标签使用
 *
 * 组件的优势：
 * 1. 复用性
 * 2. 代码精简
 * 3. 可读性强
 * 4. 可维护性强
 *
 * @ 路径别名 => 相当于 ./src
 */
import TodoView from '@/components/TodoView.vue'
import TodoControl from '@/components/TodoControl.vue'
import TestCom from './components/test.vue'
export default {
  components: { TodoView, TodoControl, TestCom },
  data() {
    return {
      msg: 'hello Vue',
      value: '',
      list: [
        {
          id: 1,
          value: '看电影',
          check: false,
        },
        {
          id: 2,
          value: '谈对象',
          check: false,
        },
      ],
    }
  },
  methods: {
    onInput(v) {
      this.value = v
    },
    onKeyUp(value) {
      this.list.push({
        id: Date.now(),
        value: value,
        check: false,
      })
    },
    onChange(item) {
      item.check = !item.check
    },
    removeClick(index) {
      this.list.splice(index, 1)
    },
  },
}
</script>
